<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 首页(空态)</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .tabs {
            display: flex;
            border-bottom: 1px solid #ebedf0;
            background-color: #fff;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 15px;
            font-weight: 500;
            color: #646566;
            position: relative;
        }
        .tab.active {
            color: #1989fa;
        }
        .tab.active:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 3px;
            background-color: #1989fa;
            border-radius: 3px;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            text-align: center;
        }
        .empty-icon {
            width: 80px;
            height: 80px;
            background-color: #f5f7fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        .empty-icon i {
            font-size: 32px;
            color: #c8c9cc;
        }
        .empty-text {
            font-size: 14px;
            color: #969799;
            margin-bottom: 16px;
        }
        .empty-button {
            background-color: #1989fa;
            color: white;
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        /* 添加弹窗相关样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-container {
            background-color: white;
            border-radius: 12px;
            width: 90%;
            max-width: 400px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #ebedf0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-body {
            padding: 15px;
        }
        
        .modal-footer {
            padding: 15px;
            border-top: 1px solid #ebedf0;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        
        .modal-overlay.show {
            display: flex;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="navbar-btn">
                <i class="fas fa-bell"></i>
            </div>
            <div class="navbar-title">AI选股</div>
            <div class="navbar-btn">
                <i class="fas fa-plus"></i>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <i class="fas fa-search"></i>
                <input type="text" class="search-input" placeholder="搜索股票代码或名称">
            </div>

            <!-- 每日推荐卡片 -->
            <div class="card">
                <div class="card-content bg-gradient-to-r from-blue-500 to-indigo-600 text-white p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-xl font-bold mb-1">今日AI推荐</h3>
                            <p class="text-sm opacity-80">基于多维度分析的精选推荐</p>
                        </div>
                        <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-robot text-white text-xl"></i>
                        </div>
                    </div>
                    <button class="mt-3 bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium">
                        查看详情 <i class="fas fa-arrow-right ml-1"></i>
                    </button>
                </div>
            </div>

            <!-- 股票列表 Tab 切换 -->
            <div class="card">
                <div class="tabs">
                    <div class="tab active" id="watchlist-tab">自选股</div>
                    <div class="tab" id="positions-tab">我的持仓</div>
                </div>
                
                <!-- 我的自选股 - 空态 -->
                <div class="tab-content active" id="watchlist-content">
                    <!-- 空态展示 -->
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="empty-text">您还没有添加自选股</div>
                        <button class="empty-button">
                            <i class="fas fa-plus mr-1"></i> 添加自选股
                        </button>
                    </div>
                </div>

                <!-- 我的持仓记录 - 空态 -->
                <div class="tab-content" id="positions-content">
                    <!-- 空态展示 -->
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-wallet"></i>
                        </div>
                        <div class="empty-text">您还没有添加持仓</div>
                        <button class="empty-button" id="addPositionBtn">
                            <i class="fas fa-plus mr-1"></i> 添加持仓
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>

    <!-- 添加持仓记录弹窗 -->
    <div class="modal-overlay" id="addPositionModal">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="text-lg font-medium">添加持仓记录</h3>
                <button class="text-gray-400" id="closeModalBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <!-- 股票搜索 -->
                <div class="mb-4">
                    <label class="form-label">选择股票</label>
                    <div class="flex items-center bg-gray-100 rounded-lg px-3 py-2">
                        <i class="fas fa-search text-gray-400 mr-2"></i>
                        <input type="text" class="bg-transparent flex-1 outline-none" placeholder="搜索股票代码或名称">
                    </div>
                </div>
                
                <!-- 搜索结果列表 -->
                <div class="mb-4 border rounded-lg overflow-hidden">
                    <div class="p-2 border-b bg-blue-50">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="font-medium">腾讯控股</div>
                                <div class="text-xs text-gray-500">00700.HK</div>
                            </div>
                            <div class="text-right">
                                <div class="font-medium">388.60</div>
                                <div class="text-xs text-red-500">+2.21%</div>
                            </div>
                        </div>
                    </div>
                    <div class="p-2 border-b">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="font-medium">腾讯音乐</div>
                                <div class="text-xs text-gray-500">TME.US</div>
                            </div>
                            <div class="text-right">
                                <div class="font-medium">7.85</div>
                                <div class="text-xs text-red-500">+3.15%</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 持仓表单 -->
                <div class="space-y-3">
                    <div>
                        <label class="form-label">持仓数量 (股)</label>
                        <input type="number" class="form-input" placeholder="请输入持仓数量">
                    </div>
                    
                    <div>
                        <label class="form-label">买入价格 (元/股)</label>
                        <input type="number" step="0.01" class="form-input" placeholder="请输入买入价格">
                    </div>
                    
                    <div>
                        <label class="form-label">买入日期</label>
                        <input type="date" class="form-input">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700" id="cancelModalBtn">取消</button>
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg font-medium">确认添加</button>
            </div>
        </div>
    </div>

    <script>
        // Tab切换逻辑
        document.getElementById('positions-tab').addEventListener('click', function() {
            document.getElementById('positions-tab').classList.add('active');
            document.getElementById('watchlist-tab').classList.remove('active');
            document.getElementById('positions-content').classList.add('active');
            document.getElementById('watchlist-content').classList.remove('active');
        });

        document.getElementById('watchlist-tab').addEventListener('click', function() {
            document.getElementById('watchlist-tab').classList.add('active');
            document.getElementById('positions-tab').classList.remove('active');
            document.getElementById('watchlist-content').classList.add('active');
            document.getElementById('positions-content').classList.remove('active');
        });

        // 弹窗控制逻辑
        const modal = document.getElementById('addPositionModal');
        const addPositionBtn = document.getElementById('addPositionBtn');
        const closeModalBtn = document.getElementById('closeModalBtn');
        const cancelModalBtn = document.getElementById('cancelModalBtn');

        function showModal() {
            modal.classList.add('show');
        }

        function hideModal() {
            modal.classList.remove('show');
        }

        addPositionBtn.addEventListener('click', showModal);
        closeModalBtn.addEventListener('click', hideModal);
        cancelModalBtn.addEventListener('click', hideModal);
    </script>
</body>
</html> 